<template>
  <div class="mastery-level-sidebar">
    <header>掌握度分析</header>
    <div class="block-box">
      <p class="title">知识点</p>
      <ul class="overview">
        <template v-for="(item, index) in MASTERY_LEVEL" :key="item.name">
          <li class="overview-item">
            <el-popover placement="left" :width="400" trigger="click">
              <el-scrollbar height="20vw">
                <a-table
                  :dataSource="props[item.key]"
                  :customRow="customRow"
                  :columns="columns"
                  :pagination="false"
                  :showExpandColumn="false"
                  :locale="locale"
                />
              </el-scrollbar>
              <template #reference>
                <div class="item">
                  <p class="name">
                    {{ item.name }}
                    <el-popover
                      placement="bottom-start"
                      width="10vw"
                      trigger="hover"
                      :content="item.tooltip"
                    >
                      <template #reference>
                        <img
                          src="@/assets/images/target-boost/icon-question.svg?url"
                        />
                      </template>
                    </el-popover>
                  </p>

                  <p class="num">
                    {{
                      useTransition(props[item.key]?.length || 0, {
                        duration: 1500
                      })
                    }}
                    <img
                      src="@/assets/images/common/arrow-right-blue.svg?url"
                    />
                  </p>
                </div>
              </template>
            </el-popover>
          </li>
          <el-divider
            direction="vertical"
            v-if="index !== MASTERY_LEVEL.length - 1"
          ></el-divider>
        </template>
      </ul>
    </div>
    <div class="block-box">
      <p class="title">掌握较好（前5）</p>
      <ul class="master-list" v-if="getGoodList.length">
        <li
          class="master-list-item"
          v-for="item in getGoodList"
          :key="item.name"
        >
          <div class="left">
            <p class="topic">
              {{ item.name }}
            </p>
            <Progress
              bgColor="rgba(230, 245, 255, 0.8)"
              contentColor="#7DC2FF"
              :percent="item.mastery_rate.class_rate * 100"
            />
          </div>
          <span class="good-num"
            >{{
              parseFloat((item.mastery_rate.class_rate * 100).toFixed(2))
            }}%</span
          >
        </li>
      </ul>
      <el-empty v-else></el-empty>
    </div>
    <div class="block-box">
      <p class="title">掌握较差（后5）</p>
      <ul class="master-list" v-if="getBadList.length">
        <li
          class="master-list-item"
          v-for="item in getBadList"
          :key="item.name"
        >
          <div class="left">
            <p class="topic">
              {{ item.name }}
            </p>
            <Progress
              bgColor="#FFEDEB"
              contentColor="#FF8A78"
              :percent="item.mastery_rate.class_rate * 100"
            />
          </div>

          <span class="bad-num"
            >{{
              parseFloat((item.mastery_rate.class_rate * 100).toFixed(2))
            }}%</span
          >
        </li>
      </ul>
      <el-empty v-else></el-empty>
    </div>
    <student-status
      currentTab="mastery-level"
      :knowledgeId="knowledgeId"
      :classId="classId"
      :selectTime="selectTime"
      :currentGradeNum="currentGradeNum"
      @toDetail="toDetail"
    ></student-status>
  </div>
</template>
<script setup>
import Progress from './Progress.vue'
import StudentStatus from './StudentStatus.vue'

import { ArrowRight } from '@element-plus/icons-vue'
import { computed, toRaw } from 'vue'
import { useTransition } from '@vueuse/core'
import { useRoute } from 'vue-router'

const emit = defineEmits(['toDetail'])
const route = useRoute()

const MASTERY_LEVEL = [
  {
    name: '已掌握',
    key: 'masteredKnowledgePoints',
    tooltip: '优秀(掌握度95%以上)等级的知识点个数'
  },
  {
    name: '需巩固',
    key: 'unmasteredKnowledgePoints',
    tooltip: '良好(掌握度75%-95%)等级的知识点个数'
  },
  {
    name: '待补差',
    key: 'listWeaknesses',
    tooltip: '一般(掌握度60-75%)和较差(掌握度小于60%)等级的知识点个数'
  }
]

const locale = {
  emptyText: '暂无数据',
  cancelSort: '点击取消排序',
  triggerAsc: '点击升序',
  triggerDesc: '点击降序'
}

const props = defineProps({
  knowledgeId: {
    type: [String, Number],
    default: ''
  },
  classId: {
    type: String,
    default: ''
  },
  currentGradeNum: {
    type: Number
  },
  selectTime: {
    type: Array,
    default: () => []
  },
  isShowDetail: {
    type: Boolean,
    default: false
  },
  listWeaknesses: {
    default: () => [],
    type: Array
  },
  masteredKnowledgePoints: {
    default: () => [],
    type: Array
  },
  unmasteredKnowledgePoints: {
    default: () => [],
    type: Array
  }
})

const getGoodList = computed(() => {
  const list = toRaw(props.masteredKnowledgePoints)
  return list
    .sort((a, b) => b.mastery_rate.class_rate - a.mastery_rate.class_rate)
    .slice(0, 5)
})

const getBadList = computed(() => {
  const list = toRaw(props.listWeaknesses)
  return list
    .sort((a, b) => a.mastery_rate.class_rate - b.mastery_rate.class_rate)
    .slice(0, 5)
})

const sidebarData = defineModel('sidebarData')
const customRow = row => {
  return {
    onClick: () => {
      console.log(row)
      sidebarData.value = row
      emit('showDetail')
    }
  }
}

const isStudent = route.query.studentId
const columns = [
  {
    title: '知识点',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '考察题目数',
    width: '6vw',
    customRender: ({ record }) => {
      return (
        (isStudent
          ? record.mastery_rate.personal_count
          : record.mastery_rate.class_count) || '-'
      )
    }
  },
  {
    title: '掌握度',
    width: '6vw',
    customRender: ({ record }) => {
      return (
        parseFloat(
          (
            ((isStudent
              ? record.mastery_rate.personal_rate
              : record.mastery_rate.class_rate) || 0) * 100
          ).toFixed(2)
        ) + '%'
      )
    }
  }
]

const toDetail = (_, e) => {
  emit('toDetail', null, e)
}
</script>
<style lang="less" scoped>
.mastery-level-sidebar {
  background-color: #fff;
  padding: 20px;
  height: 100%;
  box-sizing: border-box;

  header {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: rgba(4, 11, 26, 0.9);
    margin-bottom: 18px;
  }

  .block-box {
    &:not(:first-child) {
      margin-bottom: 28px;
    }

    .el-empty {
      padding: unset;
    }

    .title {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
      font-weight: 500;
      color: rgba(4, 11, 26, 0.85);
      margin-bottom: 20px;
      padding-left: 20px;

      &::before {
        position: absolute;
        content: '';
        background-color: @color-brand-regular;
        width: 7px;
        height: 17px;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .overview {
      background-color: rgba(232, 246, 255, 0.9);
      border-radius: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      margin-bottom: unset;

      .el-divider {
        height: 53px;
        border-left: 1px solid #5aadf9;
      }

      &-item {
        cursor: pointer;

        .name,
        .num {
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .name {
          color: rgba(4, 11, 26, 0.7);
          font-size: 14px;
          font-weight: 500;
          gap: 10px;
          margin-bottom: 10px;

          img {
            width: 14px;
          }
        }

        .num {
          display: flex;
          justify-content: space-around;
          gap: 8px;
          font-size: 22px;
          font-weight: 700;
          color: #5aadf9;

          img {
            height: 18px;
          }
        }
      }
    }

    .master-list {
      margin-bottom: unset;

      &-item {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
          width: 205px;
        }

        &:not(:last-child) {
          margin-bottom: 18px;
        }

        .topic {
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 14px;
          display: flex;
          justify-content: space-between;
          color: rgba(4, 11, 26, 0.7);
          margin-bottom: 8px;
        }

        .good-num,
        .bad-num {
          font-size: 14px;
          font-weight: 500;
        }

        .good-num {
          color: #428fff;
        }

        .bad-num {
          color: #ff8a78;
        }
      }
    }

    .mark-icon {
      flex: auto;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 20px;
      font-size: 14px;
      color: #a1a1a1;

      .full-score,
      .non-full-score {
        display: flex;
        align-items: center;

        &::before {
          box-sizing: border-box;
          content: '';
          display: inline-block;
          width: 13px;
          height: 13px;
          background-color: #fff;
          border-radius: 50%;
          margin-right: 5px;
        }
      }

      .full-score::before {
        border: 3px solid #f7b446;
      }

      .non-full-score::before {
        border: 3px solid #f75352;
      }
    }
  }
}
</style>
